import { Avatar } from 'antd';
import styles from './information.module.css'
import Markdown from 'react-markdown';
import { markdownComponents } from '../../component/markdownComponment/markdownComponment';
import remarkGfm from 'remark-gfm';
import { useState } from 'react';
const siderItemArr = [
    {id: 0, Avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1', title: '1111', subTitle: '11'},
    {id: 1, Avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2', title: '2222', subTitle: '22'},
    {id: 2, Avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=3', title: '3333', subTitle: '33'},
    {id: 3, Avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=4', title: '4444', subTitle: '44'}
]

const artcleArr = [
`# 个人知识库讯息分类体系（v2.0）
## 一、核心分类维度
通过「场景+时效+优先级」三维度划分，确保讯息检索效率提升60%以上，具体分类规则如下表：

| 分类维度 | 细分类型                | 标识符号 | 处理规则                                                                 |
|----------|-------------------------|----------|--------------------------------------------------------------------------|
| 场景维度 | 学习类（课程笔记/文献） | 📚       | 按「学科→章节→关键词」建立子目录，如「计算机科学/算法/动态规划」          |
|          | 工作类（项目文档/会议） | 💼       | 关联「项目ID+时间戳」，例：「PRJ-202405/会议纪要_20240510」              |
|          | 生活类（待办/灵感）     | 🏠       | 支持「标签云」标注，如「旅行计划」「美食探店」「创意点子」                |
| 时效维度 | 即时性（24h内需处理）   | ⏰       | 自动置顶至「今日焦点」面板，超时未处理发送桌面提醒                        |
|          | 周期性（每周/每月更新） | 🔄       | 按周期生成「更新日志」，如「月度账单_202405」「周计划_第20周」            |
|          | 永久性（长期存档）      | 📦       | 压缩备份至「归档库」，每季度进行完整性校验                                |

## 二、分类操作规范
1. **新增讯息时**：必须填写「场景标签」和「时效标签」，优先级标签（高/中/低）可选填
2. **更新讯息时**：同步修改「时间戳」和「版本号」，例：将「V1.0」更新为「V1.1_20240512」
3. **删除讯息时**：先移入「回收站」保留30天，确认无需恢复后再永久删除，避免误删

> 注意：所有分类标签需遵循「极简原则」，单个讯息标签不超过3个，避免过度分类导致混乱。`,
`### 团队项目讯息同步模板（通用版）
#### 一、同步模板核心结构
【项目同步】{项目名称} - {同步日期：YYYY-MM-DD}
1. 进度回顾（截至当前）：
   - 已完成：{任务A，如「需求文档V2.0评审通过」}
   - 进行中：{任务B，如「UI设计（完成80%，预计5.15交付）」}
   - 未启动：{任务C，如「接口开发（待UI交付后启动）」}
2. 风险与阻塞：
   - 风险点1：{具体问题，如「第三方接口延迟，影响登录模块开发」}
   - 应对措施：{解决方案，如「已联系供应商，要求5.12前修复」}
3. 待协同事项：
   - @{成员姓名}：{需配合工作，如「请于5.11前提供测试用例」}
   - @{成员姓名}：{需确认内容，如「确认支付流程是否支持跨境支付」}
4. 下次同步时间：{YYYY-MM-DD HH:MM，如「2024-05-15 14:00」}`,
`## 讯息安全风险等级与应对方案
### 一、风险等级划分标准
根据「泄露影响范围」和「数据敏感度」，将讯息安全风险分为4级，具体如下：

| 风险等级 | 核心特征                                  | 典型场景                          | 应对措施                                                                 |
|----------|-------------------------------------------|-----------------------------------|--------------------------------------------------------------------------|
| 一级（低） | 仅涉及个人非敏感信息，无商业/隐私风险      | 公开的活动通知、非涉密工作安排    | 1. 避免在公共网络（如咖啡厅Wi-Fi）发送 2. 无需加密，仅需常规防误发检查   |
| 二级（中） | 涉及内部工作数据，泄露可能影响团队效率    | 未公开的项目进度、内部会议纪要    | 1. 使用企业内部通讯工具发送 2. 开启「阅后即焚」（有效期24h） 3. 禁止截图转发 |
| 三级（高） | 涉及商业机密，泄露可能导致经济损失        | 客户合同、核心技术文档、财务预算  | 1. 采用「端到端加密」发送 2. 限制接收方「复制/下载」权限 3. 发送前需「二次验证」 |
| 四级（极高）| 涉及用户隐私/合规数据，泄露触犯法律法规    | 用户身份证号、银行卡信息、医疗记录| 1. 使用专用加密工具（如国密算法工具） 2. 仅允许「指定设备」接收 3. 传输后删除本地记录 |

### 二、常用防护工具推荐
- **加密传输工具**：Signal（开源免费，支持端到端加密）、企业微信「保密消息」功能
- **权限管理工具**：飞书「文档权限设置」（支持「仅查看-禁止下载」「指定人可见」）
- **风险检测工具**：360安全卫士「讯息安全检测」（识别钓鱼链接、恶意附件）

> 参考标准：符合《网络安全法》《个人信息保护法》要求，企业可根据自身规模调整「三级/四级」风险的判定阈值。`,
`# 跨平台讯息整合工具对比报告（2024版）
## 一、主流工具核心功能对比
| 工具名称       | 核心功能                                  | 优缺点对比                                  | 适用场景                          |
|----------------|-------------------------------------------|---------------------------------------------|-----------------------------------|
| **Notion 讯息库** | 1. 支持「文本+表格+数据库」混合排版 2. 关联「跨平台讯息链接」（如微信/企业微信消息） 3. 自定义视图（列表/看板/日历） | 优点：灵活性高，可搭建个性化整合体系<br>缺点：免费版空间有限（1000块内容块），加载速度较慢 | 个人知识库整合、小型团队讯息归档  |
| **Flomo 浮墨**   | 1. 支持「快速捕捉」（快捷键Ctrl+Shift+P唤醒） 2. 自动「标签聚合」（如#工作 #学习） 3. 「双链笔记」（关联相关讯息） | 优点：轻量化，无学习成本，同步速度快<br>缺点：功能较基础，不支持复杂表格和权限管理 | 个人碎片化讯息收集、灵感记录      |
| **飞书多维表格** | 1. 「讯息嵌入」（直接导入微信/邮件消息） 2. 「自动化流程」（如收到客户消息自动录入表格） 3. 「多人实时协作」（支持评论/修改记录） | 优点：企业级权限管理，适合跨部门协同<br>缺点：需熟悉表格操作逻辑，个性化模板较少 | 中大型团队项目讯息整合、客户沟通记录 |

## 二、工具选择建议
1. **个人用户**：优先选「Flomo」，轻量化设计适合快速记录，避免因功能复杂导致「弃用」
2. **小型团队（10人内）**：选「Notion」，可自定义搭建「讯息-任务-文档」一体化体系，成本低
3. **中大型企业**：选「飞书多维表格」，与企业通讯工具无缝衔接，满足合规和权限管理需求

![工具功能对比示意图](https://lh.ithxs.com/apis.php?act=pc)
*示意图注：左侧为Notion讯息库界面，右侧为飞书多维表格协作界面，可直观查看功能差异*`
]

const Information = () => {
const [artcleIndex, setArtcleIndex] = useState(0);
const [selectedArtcle, setSelectedArtcle] = useState(artcleArr[0]);
const handleClickSiderItem = (id) => {
    setArtcleIndex(id);
    // 修复状态更新异步问题，直接使用id而不是artcleIndex
    setSelectedArtcle(artcleArr[id]);
    console.log(1,'GOT_artcleIndex --->', id);
    console.log(2,'GOT_selectedArtcle --->', artcleArr[id]);
    console.log(3,'GOT_id --->', id);
}

return (
  <div className={styles.contentView}>
    <div className={styles.sider}>
      {siderItemArr.map((item) => (
        <div
          className={item.id === artcleIndex ? styles.siderItemActive : styles.siderItem}
          onClick={()=>{handleClickSiderItem(item.id)}}
        >
          <Avatar
            src={item.Avatar}
            shape='square'
            size={42}
            style={{margin: '5px', border: '2px dashed rgb(170, 197, 219)'}}
          />
          <div className={styles.titleArea}>
            <div className={styles.title}>{item.title}</div>
            <div className={styles.subTitle}>{item.subTitle}</div>
          </div>
        </div>))}
    </div>
    <div className={styles.cardView}>
      <div className={styles.card}>
        <Markdown
          components={markdownComponents} // 应用自定义标签
          remarkPlugins={[remarkGfm]} // 启用扩展语法
          children={selectedArtcle}
        />
      </div>
    </div>
  </div>
  )
};

export default Information